<template>
<div>
  index {{runTime}}
  <Header :header="header" ref="header"></Header>
  <Content></Content>
  <Footer></Footer>
</div>
</template>

<script>
import Header from './header'
import Content from './content'
import Footer from './footer'
export default {
  name: "Index",
  data(){
    return {
      header: '父组件的数据',
      runTime: ""
    }
  },
  components: {
    Header, Footer, Content,
  },
  mounted(){
    this.$refs.header.num = 222;
    // this 指向当前组件
    console.log(this.$refs)  // {header: VueComponent}
  }
}
</script>

<style scoped>

</style>